<template>
  <div style="width: 100%">
    <template>
      <div v-if="isDesigner">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div v-else-if="mode === 'edit'">
        <el-calendar v-if="!month">
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template slot="dateCell" slot-scope="{ date, data }">
            <p
              :class="data.isSelected ? 'is-selected' : ''"
              @click="tapDate(data)"
              slot="reference"
            >
              {{ data.day.split("-").slice(2).join("-") }}
            </p>
          </template>
        </el-calendar>
        <div v-else class="box" style="padding: 20px">
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 20px;
            "
          >
            <div class="year">2023年</div>
          </div>
          <div style="border: 0.5px solid #bbbcbd">
            <div style="display: flex; height: 100px">
              <div class="month">1</div>
              <div class="month">2</div>
              <div class="month">3</div>
              <div class="month">4</div>
            </div>
            <div style="display: flex; height: 100px">
              <div class="month">5</div>
              <div class="month">6</div>
              <div class="month">7</div>
              <div class="month">8</div>
            </div>
            <div style="display: flex; height: 100px">
              <div class="month">9</div>
              <div class="month">10</div>
              <div class="month">11</div>
              <div class="month">12</div>
            </div>
          </div>
        </div>
        <!-- 表单 -->
        <el-dialog
          title=""
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose"
        >
          <div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="当前日期">
                {{ today }}
              </el-form-item>
              <el-form-item label="填入工时">
                <el-input
                  v-model="form.time"
                  @input="inputchange"
                  placeholder="请输入工时"
                  :disabled="disabled"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">保 存</el-button>
          </span>
        </el-dialog>
      </div>
      <div v-else>
        {{ value }}
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: "calendar",
  props: {
    value: {
      type: String | Number | Object | Array,
    },
    mode: {
      // 编辑态: edit, 查看态:view , 用于在子表格内切换状态
      default: "edit",
    },
    entityModel: {
      // 如果组件绑定了一个实体, 则该属性会传入实体的数据
      default: () => {},
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    month: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      value1: new Date(),
      visible: false,
      dialogVisible: false,
      today: "",
      form: {
        time: "",
      },
    };
  },
  created() {
    if (this.value) {
      console.log(111);
      console.log(this.value, "111");
      // this.form.value = this.value;
      if (this.mode == "view") {
        this.disabled = true;
      }
    }
  },
  computed: {
    isDesigner() {
      return this.$attrs._source === 'designer'
    },
  },
  methods: {
    tapDate(data) {
      this.today = data.day;
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    inputchange() {
      this.$emit("input", this.form.time);
      // console.log(this.form.time);
    },
    save() {
      console.log(this.form.time);
    },
  },
};
</script>
<style scoped>
.is-selected {
  color: #1989fa;
}
.box {
  border: 1px solid #bbbcbd;
}
.year {
}
.month {
  width: 100%;
  border: 0.5px solid #bbbcbd;
  padding:0px 0 0 5px;
}
</style>
